<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}"></comp-common>
			<comp-header v-bind="{data:data}"></comp-header>
			<view class="body after-navber">
				<view class="top">
					<image :src="data.__wxapp_img.step.detail_bg.url"></image>
					<view class="detail-name">账户{{data.dapp.option.step.currency_name?dapp.option.step.currency_name:'活力币'}}</view>
					<view class="detail-number">{{data.number}}
						<text>个</text>
					</view>
				</view>
				<view class="tab">
					<view class="tab-list">
						<text @click="tab" :class="[data._num==1?'active':'']" data-num="1">收入</text>
					</view>
					<view class="tab-list">
						<text @click="tab" :class="[data._num==2?'active':'']" data-num="2">支出</text>
					</view>
				</view>
				<view class="list" v-for="(item,index) in data.list" :key="index">
					<view class="list-left">
						<view class="name" v-if="item.type==0">步数兑换</view>
						<view class="name" v-if="_num==2&&item.type==1">{{item.name}}</view>
						<view class="name" v-if="_num==1&&item.type==1">订单取消</view>
						<view class="name" v-if="item.type==2">{{item.activity.name}}</view>
						<view>{{item.create_time}}</view>
					</view>
					<view class="list-right">
						<text v-if="data._num==1">+</text>
						<text v-if="data._num==2">-</text>
						<text>{{item.step_currency}}</text>
					</view>
				</view>
				<view class="loading" v-if="data.loading">正在加载中...</view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>

	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
					number: 0,
					_num: 1,
					page: 2,
					list: [],
					over: !1
				},
			};
		},
		onReachBottom: function() {
			var t = this,
				a = t.data.over;
			if (!a) {
				this.data.id;
				var e = this.data.list,
					s = this.data._num,
					p = this.data.page;
				this.setData({
					loading: !0
				}), t.getApp.request({
					url: t.getApp.api.step.log,
					data: {
						status: s,
						page: p
					},
					success: function(s) {
						for (var o = 0; o < s.data.log.length; o++) e.push(s.data.log[o]);
						s.data.log.length < 6 && (a = !0), t.setData({
							list: e,
							page: p + 1,
							loading: !1,
							over: a
						});
					}
				});
			}
		},
		onLoad: function(t) {myVue = this;
			myVue.getApp.page.onLoad(this, t);
			var a = this;
			a.getApp.core.showLoading({
				title: "数据加载中...",
				mask: !0
			}), a.getApp.request({
				url: a.getApp.api.step.log,
				data: {
					status: 1,
					page: 1
				},
				success: function(t) {
					a.getApp.core.hideLoading();
					var e = t.data.log;
					a.setData({
						number: t.data.user.step_currency,
						list: e
					});
				}
			});
		},

		methods: {
			tab: function(t) {
				var a = this,
					e = t.target.dataset.num;
				a.getApp.core.showLoading({
					title: "数据加载中...",
					mask: !0
				}), a.getApp.request({
					url: a.getApp.api.step.log,
					data: {
						status: e
					},
					success: function(t) {
						a.getApp.core.hideLoading();
						var s = t.data.log;
						a.setData({
							number: t.data.user.step_currency,
							list: s,
							_num: e,
							page: 2
						});
					}
				});
			},
		}
	}
</script>

<style scoped>
	.top { 
		height: 160upx; 
		width: 100%; 
		position: relative; 
		margin-bottom: 20upx; 
	} 
 
	.top image { 
		width: 100%; 
		height: 100%; 
	} 
 
	.detail-name { 
		position: absolute; 
		left: 24upx; 
		top: 36upx; 
		font-size: 10pt; 
		color: #fff; 
	} 
 
	.detail-number { 
		position: absolute; 
		bottom: 36upx; 
		left: 24upx; 
		font-size: 18pt; 
		color: white; 
		font-family: 'DIN'; 
	} 
 
	.detail-number text { 
		font-size: 11pt; 
	} 
 
	.tab { 
		height: 87upx; 
		width: 100%; 
		background-color: white; 
		border-bottom: 1upx #e2e2e2 solid; 
	} 
 
	.tab-list { 
		display: inline-block; 
		width: 50%; 
		line-height: 88upx; 
		font-size: 12pt; 
		color: #666; 
		text-align: center; 
	} 
 
	.active { 
		color: #ff4544; 
		display: inline-block; 
		height: 84upx; 
		border-bottom: 4upx solid #ff4544; 
	} 
 
	.list { 
		height: 139upx; 
		width: 100%; 
		padding: 36upx 24upx; 
		background-color: white; 
		border-bottom: 1upx #e2e2e2 solid; 
	} 
 
	.list-left { 
		color: #666; 
		font-size: 9pt; 
		float: left; 
		width: 60%; 
	} 
 
	.name { 
		font-size: 11pt; 
		color: #353535; 
		overflow: hidden; 
		text-overflow: ellipsis; 
		white-space: nowrap; 
	} 
 
	.list-right { 
		color: #353535; 
		font-size: 13pt; 
		float: right; 
		line-height: 68upx; 
	} 
 
	.loading { 
		font-size: 9pt; 
		color: #353535; 
		text-align: center; 
		height: 80upx; 
		line-height: 80upx; 
		background-color: white; 
	}
</style>
